<*****攻防赛*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
		<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :nodownloadReports="1">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div id="scoreAnalysis" class="chart" style="height:100%;width:100%"></div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4>排行总榜</h4><small v-if="!['8', '9'].includes(type)">(得失分:攻击得分/防守得分/异常得分/异常失分，攻击次数:总次数/成功次数/失败次数/被攻击次数)</small>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in contestPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">竞赛数据</h4>
					<Table stripe :columns="contestCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
	import HighCharts from 'highcharts'
	import highchartsMore from 'highcharts/highcharts-more';
	import * as SeriesLabel from 'highcharts/modules/series-label';
//	import html2canvas from 'html2canvas'
//	import jsPDF from 'jspdf'
	import mixin from "@/components/report/mixinFun.js"
	//接口
    import {getArchiveDeatil} from '@/api/experimenterTrack'
	//组件
	import reportHeader from "@/components/report/reportHeader.vue"
	import cover from "@/components/report/cover.vue"
	import page from "@/components/report/page.vue"
	import { parseJson } from '@/libs/utils'
	export default {
		name: 'adcReport',
		components: {
			page,
			cover,
			reportHeader
		},
		mixins: [mixin],
		data() {
			return {
				type: this.$route.query.type,
				reportCol: [{
					key: 'teamName',
					title: '团队名称',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '得失分',
					render: (h, params) => {
						return h('span', (params.row.attackScore || 0) + "/" + (params.row.defenseScore || 0) + "/" + (params.row.exceptScore || 0) + "/" + (params.row.exceptLostScore || 0))
					},
					per: 0.25
				}, {
					key: 'totalScore',
					title: '攻击次数',
					render: (h, params) => {
						return h('span', (params.row.totalCount || 0) + "/" + (params.row.attackCount || 0) + "/" + (params.row.failCount || 0) + "/" + (params.row.defenseFailedCount || 0))
					},
					per: 0.25
				}, ],
				reportInfo: {},
				sceneId: this.$route.query.id,
				scale: 1,
				fontSize: 14,
				disSub: false,
				rankList: [],
				rankListPageNumArr: [],
				contestTableList:[],
				contestPageNumArr:[],
				contestCol:[],
				disDownloadReport: true,
			}
		},
		watch: {

		},
		filters: {

		},
		computed: {
			extension() {
				return parseJson(this.reportInfo.extension)
			},
			basisScore() {
				return this.extension.basicScore || 5000
			},
			coverData: function() {
				let {
					startTime,
					endTime,
					userCount,
					creatorName,
					teamCount
				} = this.reportInfo;
				return [{
					value: startTime,
					title: '开始时间'
				}, {
					value: endTime,
					title: '结束时间'
				}, {
					value: creatorName,
					title: '创建者'
				}, {
					value: (teamCount || 0) + '个',
					title: '参赛团队'
				}, {
					value: (userCount || 0) + '人',
					title: '参赛人数'
				}, ]
			},
		},
		mounted() {
			this.setStyle();
			this.getArchiveDeatil();
			window.onresize = () => {
				this.disDownloadReport = true;
				this.setStyle();
			}
			this.changeReportCol()
			// this.competDrillTableTeamStatistics()
		},
		beforeDestroy() {

		},
		methods: {
        getArchiveDeatil(){
            getArchiveDeatil(this.$route.query.id).then(res=>{
                if(res.code==1){
                    let content=res.data.content
                    content=JSON.parse(content)
                    this.reportInfo=content.reportInfo
                    this.rankListPageNumArr=content.rankListPageNumArr
                    this.contestPageNumArr=content.contestPageNumArr
                    this.generateReport()
                    this.initCol()
                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
		getTablePage() {
				this.initCol();
				if(this.contestTableList.length > 0) {
					this.contestPageNumArr = this.getTablePageData(this.contestCol, this.contestTableList);
					console.log(this.contestPageNumArr,'contestPageNumArrcontestPageNumArr');
				}
		},
        initCol() {
				this.contestCol = [
				 {
					type: 'index',
					width: 30,
					title: '排名',
					align: 'center'
				},{
					key: 'teamName',
					title: '团队名称',
					width: 40
				}, {
					key: 'spendTime',
					title: '竞赛时长',
					per: 0.15
				}, {
					key: 'missionNum',
					title: '竞赛总任务数',
					width: 0.1
				}, {
					key: 'teamAttackNum',
					title: '团队攻击总数',
					width: 0.15
				},{
					key: 'teamFinishMissionNum',
					title: '团队有效攻击次数',
					per: 0.15
				}, {
					key: 'rightAttackPercent',
					title: '有效攻击指数',
					per: 0.15
				}, {
					key: 'attackPercent',
					title: '攻击指数',
					per: 0.15
				},{
					key: 'threatPercent',
					title: '威胁指数',
					per: 0.2			}];
			},
			changeReportCol() {
				if (this.type === '8') {
					this.reportCol = [{
						key: 'teamName',
						title: '团队名称',
						per: 0.25
					}, {
						key: 'totalScore',
						title: '总分',
						per: 0.093
					}, {
						title:'基础分',
						key:'basisScore',
						per: 0.093,
						render:(h,params)=>{
							return h('span', this.basisScore || 5000)
						}
					}, {
						title:'攻击得分',
						key:'attackScore',
						per: 0.093
					}, {
						title:'防守得分',
						key:'defenseScore',
						per: 0.093
					}, {
						title:'防守失分',
						key:'defenseLostScore',
						per: 0.093
					}, {
						title:'重置失分',
						key:'resetLostScore',
						per: 0.093
					}, {
						title:'异常得分',
						key:'exceptScore',
						per: 0.093
					}, {
						title:'异常失分',
						key:'exceptLostScore',
						per: 0.093
					}]
				}
				if (this.type === '9') {
					this.reportCol = [{
						key: 'teamName',
						title: '团队名称',
						per: 0.25
					}, {
						key: 'totalScore',
						title: '总分',
						per: 0.15
					}, {
						title:'攻击得分',
						key:'attackScore',
						per: 0.15,
					}, {
						title:'运维得分',
						key:'defenseScore',
						per: 0.15
					}, {
						title:'额外得分',
						key:'exceptScore',
						per: 0.15
					}, {
						title:'额外失分',
						key:'exceptLostScore',
						per: 0.15
					}]

				}
			},
			setStyle() {
				let width = (window.innerHtml || document.documentElement.clientWidth);
				this.fontSize = width / 1519 * 14;
				if(this.fontSize < 10) {
					this.fontSize = 10;
				}
				this.setPageMargin();
				this.getRankPage();
			},
			initReportCol() {
				this.reportCol = [{
					key: 'teamName',
					title: '团队名称',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.25
				}, {
					key: 'totalScore',
					title: '得失分',
					render: (h, params) => {
						return h('span', (params.row.attackScore || 0) + "/" + (params.row.defenseScore || 0) + "/" + (params.row.exceptScore || 0) + "/" + (params.row.exceptLostScore || 0))
					},
					per: 0.25
				}, {
					key: 'totalScore',
					title: '攻击次数',
					render: (h, params) => {
						return h('span', (params.row.totalCount || 0) + "/" + (params.row.attackCount || 0) + "/" + (params.row.failCount || 0) + "/" + (params.row.defenseFailedCount || 0))
					},
					per: 0.25
				}, ];
				this.changeReportCol()
			},
			getRankPage() {
				this.initReportCol();
				if(this.rankList.length > 0) {
					this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
				});
			},
			//生成报告
			generateReport() {
				
						this.getRankPage();
						this.$nextTick(() => {
							this.drawChart();
						});
			},
			drawChart() {
				let _this = this;
				let users = [];
				let categorys = [];
				let indicatorData = [];
				if(_this.reportInfo.rankList.length <= 0) {
					return
				}
				let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '得分趋势统计',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: _this.reportInfo.rankList[0].scoreVO.map(score => score.scoreDate.split(" ")[1]),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
						title: {
							text: '得分'
						},
					},
					series: _this.reportInfo.rankList.map(user => {
						return {
							name: user.teamName,
							//type:'line',
							data: user.scoreVO.map(score => score.score)
						}
					}),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
				SeriesLabel(HighCharts);
				HighCharts.chart('scoreAnalysis', scoreOptione);
			},
			zoomIn() {
				if(this.scale == 0.5) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accSub(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize - 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
			},
			zoomOut() {
				if(this.scale == 3) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accAdd(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize + 0.5;
				}
				this.drawChart();
				this.setPageMargin();
				this.getRankPage();
			}
		},
		destroyed() {

		}
	}
</script>

<style scoped src="@/components/report/report.css">
	
</style>